<template>
  <Dialog
    :title="title"
    :model-value="visible"
    width="1400px"
    max-height="600px"
    :before-close="closeForm"
  >
    <el-row :gutter="24">
      <el-col :span="5">
        <ContentWrap title="表单分类">
          <treeDic
            v-model="queryParam.FormClassify"
            :dic-id="DictItemDic.formClassify"
            :parent-id="prtFormClassify"
            @load="loadClassify"
            @change="formTypeLoad"
          />
        </ContentWrap>
      </el-col>
      <el-col :span="19">
        <ContentWrap :header="subTitle">
          <el-form :inline="true" :model="queryParam">
            <el-form-item label="关键字">
              <el-input
                v-model="queryParam.QueryKey"
                placeholder="表单名"
                style="width: 200px"
                @change="loadGrid"
              />
            </el-form-item>
          </el-form>
          <Table
            :data="formList"
            :columns="columns"
            :is-select="true"
            :is-multiple="false"
            v-model:selectKey="chioseKey"
            :pagination="paging"
            row-key="Id"
            @change="loadGrid"
          >
            <template #formType="e">
              <span v-if="e.row.FormType == 0">自定义表单</span>
              <span v-else-if="e.row.FormType == 1">代理表单</span>
              <span v-else-if="e.row.FormType == 2">物理表</span>
              <span v-else-if="e.row.FormType == 3">视图</span>
            </template>
            <template #formClassify="e">
              <span v-if="formClassifyDic[e.row.FormClassify]">
                {{ formClassifyDic[e.row.FormClassify].text }}</span
              >
            </template>
            <template #action="e">
              <BaseButton
                v-if="e.row.FormType == 0"
                size="small"
                type="primary"
                :icon="viewIcon"
                @click="show(e.row)"
                >预览</BaseButton
              >
            </template>
          </Table>
        </ContentWrap>
      </el-col>
    </el-row>
    <template #footer>
      <el-row style="text-align: center; margin-top: 20px">
        <el-button @click="resetChiose">重 置</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </el-row>
    </template>
  </Dialog>
</template>

<script>
import * as formApi from '@/customForm/api/form'
import { DictItemDic } from '@/customForm/config/formConfig'
import { treeDic } from '@/components/base/'
import { Dialog } from '@/components/Dialog'
import { Table } from '@/components/Table'
import { useIcon } from '@/hooks/web/useIcon'
import { useAppStoreWithOut } from '@/store/modules/app'
const userStore = useAppStoreWithOut()
export default {
  components: {
    treeDic,
    Table,
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formClassify: {
      type: String,
      default: null
    },
    formType: {
      type: Array,
      default: null
    },
    companyId: {
      type: String,
      default: () => {
        return userStore.comId
      }
    },
    prtFormClassify: {
      type: String,
      default: null
    },
    isAllowNull: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      preVisible: false,
      subTitle: null,
      viewIcon: useIcon({ icon: 'ep:view' }),
      id: null,
      formList: [],
      formClassifyDic: {},
      columns: [
        {
          field: 'FormName',
          label: '表单标题',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'FormShow',
          label: '表单使用说明',
          align: 'left',
          minWidth: 150
        },
        {
          field: 'FormClassify',
          label: '表单分类',
          align: 'center',
          slotName: 'formClassify',
          width: 120
        },
        {
          field: 'FormType',
          label: '表单类型',
          align: 'center',
          slotName: 'formType',
          width: 120
        },
        {
          field: 'Ver',
          label: '版本号',
          align: 'center',
          width: 125,
          sortable: 'custom'
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          width: '180px',
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      },
      queryParam: {
        FormType: null,
        FormClassify: null,
        Status: [1],
        QueryKey: null
      },
      chioseKey: null,
      cache: {},
      isload: false
    }
  },
  computed: {
    comId() {
      return userStore.comId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    show(row) {
      this.id = row.Id
      this.preVisible = true
    },
    selected(e) {
      this.isload = true
      this.chioseKey = e.keys
      this.isload = false
    },
    loadClassify(e) {
      this.formClassifyDic = e.cache
    },
    resetChiose() {
      this.queryParam.QueryKey = null
      if (this.prtFormClassify != null && this.formClassify == null) {
        this.queryParam.FormClassify = this.prtFormClassify
      }
      if (this.formType != null && this.formType.length > 0) {
        this.queryParam.FormType = this.formType
      }
      if (this.modelValue != null) {
        this.chioseKey = [this.modelValue]
      } else {
        this.chioseKey = []
      }
      this.loadGrid()
    },
    reset() {
      this.cache = {}
      if (this.formType != null) {
        this.queryParam.FormType = this.formType
      } else {
        this.queryParam.FormType = null
      }
      if (this.formClassify != null) {
        this.queryParam.FormClassify = this.formClassify
      } else {
        this.queryParam.FormClassify = null
      }
      this.queryParam.CompanyId = this.companyId
      this.resetChiose()
    },
    save() {
      if (this.isAllowNull === false && this.chioseKey.length === 0) {
        this.$message({
          message: '请选择表单!',
          type: 'warning'
        })
        return
      }
      const key = this.chioseKey.length == 0 ? null : this.chioseKey[0]
      this.$emit('update:modelValue', key)
      this.$emit('update:visible', false)
      this.$emit('save', {
        comId: this.companyId,
        formId: key,
        form: key != null ? this.cache[key] : null
      })
    },
    async formTypeLoad(e) {
      if (e.value != null && e.value.length > 0) {
        this.queryParam.FormClassify = e.value[0]
        this.subTitle = e.tree[this.queryParam.FormClassify].text + '类表单列表'
      } else {
        this.queryParam.FormClassify = null
        this.subTitle = '全部表单'
      }
      this.loadGrid()
    },
    async loadGrid(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'Id',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      const data = await formApi.Query(this.queryParam, curPaging)
      this.paging.total = data.Count
      this.formList = data.List
      data.List.forEach((c) => {
        this.cache[c.Id] = c
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close')
    }
  }
}
</script>
<style type="less" scoped>
.searchLine .el-form-item {
  margin-right: 10px;
}
</style>
